<template>
	<view class="wrap-common-page">
		<view id="ownid">
			
		
		<view class="header">
			<view class="pic-dengdai" v-show="jiazai">
				图片加载中...
			</view>
			<swiper  class="swiper" @change="swiperChange" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			    <swiper-item v-for="(item,index) in imgList" :key="index">
			        <view class="swiper-item uni-bg-red">
						<image @load="loadimg" fade-show="true" :src="item.backUrl" mode=""></image>
					</view>
			    </swiper-item>
			</swiper>
		</view>
		
		</view>
		<view class="bottom-btn">
			
			<view class="left" @click="copy">
				复制分享链接
			</view>
			<view class="right" @click="download">保存海报</view>
		</view>
	</view>
</template>

<script>
	//import globalData from '../../common/global.js'
	//import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	let globalData={}
	export default {
		data() {
			return {
				jiazai:true,
				imgrsc:'',
				imgList:[],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				ifShow: true,
				val: '', // 要生成的二维码值
				size: 70, // 二维码大小
				unit: 'rpx', // 单位
				background: '#fff', // 背景色
				foreground: '#000', // 前景色
				pdground: 'red', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: false, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				dataShow:{},
				current:0,
				invite_url:''
			}
		},
		onLoad(){
			this.getData()
		},
		methods: {
			loadimg(val){
				let that=this
				setTimeout(function() {
					that.jiazai=false
				}, 1000);
			},
			copy(){
				let that=this
				uni.setClipboardData({
				    
					data:that.invite_url,
				    success: function () {
				        uni.showToast({
				            title: '复制成功',
				            duration:4000,
				        	icon:'none'
				        });
				    }
				});
			},
			swiperChange(val){
				this.current=val.detail.current
			},
			download(){
				uni.showLoading({
				    title: '正在生成图片'
				});
				let that=this
				
				uni.saveImageToPhotosAlbum({
				    filePath:that.imgList[that.current].backUrl,
				    success: function () {
				        uni.showToast({
				            title: '保存海报成功',  
				            mask: false,  
				            duration:4000, 
				        });  
				    }
				});
				
			},
			getData(){
				let that=this

				that.apipost('/api/home/invitefriends').then(res => {
					if(res.Code==10200){
						that.invite_url=res.Data.invite_url
						that.imgList=res.Data.posters
					}
					
				}).catch(err=>{
					console.log(err)
				});
				
			}
		}
	}
</script>
<style>
	
	.header{
		display:flex;
		position:relative;
		width:100%;
		margin:0 auto;
		justify-content: center;
	}
	.pic-dengdai{
		position:absolute;
		height:84vh;
		width:100%;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.erweima-wrap{
		margin-top:40rpx;
	}
	.erweima-wrap .desc-top{
		position:relative;
		padding-bottom:10rpx;
		margin-bottom:10rpx;
	}
	.erweima-wrap .desc-top:after{
		position:absolute;
		content:'';
		display:block;
		height:1px;
		width:140rpx;
		bottom:-2rpx;
		background:rgba(0,0,0,.4);
		margin-left:-90rpx;
		left:50%;
		
	}
	.bottom-btn{
		padding:0 30rpx;
		display:flex;
		justify-content: space-between;
	}
	.bottom-btn .left{
		width:260rpx;
		height:70rpx;
		border-radius:40rpx;
		color:#fff;
		background:#e66724;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.bottom-btn .right{
		width:260rpx;
		height:70rpx;
		border-radius:40rpx;
		color:#fff;
		background:#b43e34;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	uni-swiper{
		/* position:absolute;
		z-index:9999;
		width:640rpx;
		left:55rpx;
		right:55rpx; */
		height:84vh;
		width:100%;
	}
	uni-image{
		/* margin:0 auto; */
		width:100%;
		height:84vh;
	}
	.erweima-wrap .right img{
		height:56px;
		width:56px;
	}
	.erweima-wrap .right image{
		height:56px;
		width:56px;
	}
	.erweima-wrap{
		/* position:absolute;
		z-index:11;
		bottom:0; */
		display:flex;
		justify-content: center;
		align-items: center;
		position:relative;
		z-index:12;
	}
	.erweima-wrap .left{
		margin-right:30rpx;
	}
	
	page{
		height:100%;
	}
	.desc-item{
		line-height:64rpx;
		color:#fcb462;
	}
	.desc-one{
		padding-top:60px;
		
	}
	#canvas{
		height:256px;
		width:256px;
	}
	.wrap-border image{
		height:100%;
		width:100%;
	}
	.list-wrap .icon{
		height:30rpx;
		width:28rpx;
		/* background: url(../../static/copycode.png) no-repeat center; */
		background-size:100% auto;
	}
	.bottom-btn .desc{
		margin:10rpx 0;
	}
	.info-box{
		padding:40rpx;
		background:#732def;
		color:#fff;
	}
	.tip-btns{
		display:flex;
		justify-content: space-between;
		
		margin-bottom:60rpx;
	}
	.wrap-border{
		border:1rpx solid #fff;
		padding:38rpx 48px;
	}
	.main{
		height:300rpx;
		width:300rpx;
		
		margin:0 auto;
	}
	
	.list-wrap{
		align-items: center;
		padding-top:32rpx;
		padding-left:20rpx;
		
		margin:0 auto;
		display:flex;
		
	}
	.list-wrap .word{
		border:1rpx solid #fff;
		width:150rpx;
		border-radius:8rpx;
		margin:0 20rpx 0 20rpx;
		height:34rpx;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.bottom-btn{
		vertical-align:middle;
		height:10vh;
		margin:6vh 30rpx 0 30rpx;
	}
	.bottom-btn .desc{
		text-align: center;
		color:#666;
		padding-bottom:6rpx;
	}
	.btn-wraps{
		width:100%;
		display:flex;
		justify-content: space-between;
	}
	.bottom-btn .item{
		width:44%;
		display:flex;
		justify-content: center;
		align-items: center;
		color:#fff;
		height:80rpx;
	}
	.copy-btn{
		padding-top:19rpx;
		box-sizing: border-box;
		/* background:url(../../static/linkbg.png)#ffb260 no-repeat center 3rpx ; */
		background-size:33rpx auto;
	}
	.img-btn{
		padding-top:19rpx;
		box-sizing: border-box;
		/* background:url(../../static/shareimg.png)#e60048 no-repeat center 5rpx ; */
		background-size:24rpx auto;
	}
</style>

